<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>

        $(document).ready(function () {

            //给注册按钮添加点击事件
            $("#regist").click(function () {
                let account = $("#account").val();
                let pwd = $("#pwd").val();
                //创建对象
                let RbacManager={
                    "account":account,
                    "password":pwd
                }


                //提交数据
                $.ajax({
                    url: "managercontroller/add",
                    type: "POST",
                    headers : {'Content-Type': 'application/json'},//设置请求头
                    data : JSON.stringify(RbacManager),//JSON类型数据格式
                    success: function (res) {
                        //返回注册成功，或者注册失败
                        console.log(res);
                        if(res !=null){
                            window.location.href ="/login.html";
                        }
                    }
                })
            })

        });
        //自定义的判断变量
        let isaccount = false;
        let ispwd = false;
        let isrepwd = false;
        let isemail = false;
        let iscode = false;
        //设置button点击条件满足才能点击，修改属性使用的是attr
        function condition() {
            if (isaccount && ispwd && isrepwd) {
                $("#regist").attr("disabled", false)
            } else {
                $("#regist").attr("disabled", true)
            }
        }

        //给账号输入框添加焦事件;onblur
        function search() {

            let account = $("#account").val();
            // console.log(account);
            console.log(account);
            if (account != '' && account.length < 12 && account.length > 2 && account.length > 0) {
                //可以用
                isaccount = true;
                $("#status").text("");
                $("#status").css({ "color": "green" });
                $("#user_account").css({ "color": "green" })
                $("#account").css({ "border": "1px solid green" })

            } else {
                //不可以用
                $("#status").text("密码不能少于3个字符")
                $("#status").css({ "color": "red" });
                $("#user_account").css({ "color": "red" });
                $("#account").css({ "border": "1px solid red" })
                isaccount = false;
                return;
            }
            //发请求获取账号是否可以用
            $.ajax({
                url: "managercontroller/register",
                type: "POST",
                data: {
                    "account": account
                },
                success: function (res) {

                    if (res == "yes") {
                        isaccount = true;
                        //可以用
                        $("#status").text("");
                        $("#status").css({ "color": "green" });
                        $("#user_account").css({ "color": "green" })
                        $("#account").css({ "border": "1px solid green" })

                    } if (res == "no") {
                        isaccount = false;
                        //不可以用
                        $("#status").text("该账号已被注册")
                        $("#status").css({ "color": "red" });
                        $("#user_account").css({ "color": "red" });
                        $("#account").css({ "border": "1px solid red" })
                    }

                }
            });
            condition();
        }


        //判断第一次密码
        function pwdon() {
            let pwd = $("#pwd").val();
            console.log(pwd);
            if (pwd != '' && pwd.length < 15 && pwd.length > 4 && pwd.length > 0) {
                ispwd = true;
                //可以用
                $("#pwd_status").text("");
                $("#pwd_status").css({ "color": "green" });
                $("#user_pwd").css({ "color": "green" })
                $("#pwd").css({ "border": "1px solid green" })

            } else {
                ispwd = false;
                //不可以用
                $("#pwd_status").text("密码长度不能小于5个字符");
                $("#pwd_status").css({ "color": "red" });
                $("#user_pwd").css({ "color": "red" })
                $("#pwd").css({ "border": "1px solid red" })
                //return;
            }
            condition();
        }

        //判断确认密码
        function repwdon() {
            let repwd = $("#repwd").val();
            let pwd = $("#pwd").val();
            console.log(repwd);
            if (repwd.length != 0 && repwd == pwd) {
                isrepwd = true;
                //可以用
                $("#repwd_status").text("");
                $("#repwd_status").css({ "color": "green" });
                $("#user_repwd").css({ "color": "green" })
                $("#repwd").css({ "border": "1px solid green" })

            } else if (repwd.length == 0) {
                isrepwd = false;
                //不可以用
                $("#repwd_status").text("密码不能为空");
                $("#repwd_status").css({ "color": "red" });
                $("#user_repwd").css({ "color": "red" })
                $("#repwd").css({ "border": "1px solid red" })
                //return;
            } else if (repwd != pwd) {
                isrepwd = false;
                //不可以用
                $("#repwd_status").text("密码不一致");
                $("#repwd_status").css({ "color": "red" });
                $("#user_repwd").css({ "color": "red" })
                $("#repwd").css({ "border": "1px solid red" })
                //return;
            }
            condition();
        }

    </script>


</head>

<body>
<div class="container-fluid">
    <!-- onfocus 获得焦点时触发。onblur失去焦点时触发-->
    <div class="register">
        <p id="headline">立即注册</p>
        <span id="user_account">账号</span>
        <input type="text" name="account" placeholder="请输入账号" id="account" onblur="search()"
               onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"><br>
        <h6 id="status"></h6>

        <span id="user_pwd">密码</span>
        <input type="password" name="pwd" placeholder="请输入密码" id="pwd" onblur="pwdon()"
               onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"><br>
        <h6 id="pwd_status"></h6>

        <span id="user_repwd" style="margin-left: -30px;">确认密码</span>
        <input type="password" name="repwd" placeholder="请确密码" id="repwd" onblur="repwdon()"
               onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"><br>
        <h6 id="repwd_status"></h6>

        <button id="regist" class="btn btn-success" disabled=true>注册</button>
    </div>

</div>
</body>

</html>